﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <script src="/js/scenario1.js"></script>
</head>

<body class="win-type-body">
    <div data-win-control="SdkSample.ScenarioInput">
        <p>Obtain a thumbnail and optimize it for the type of view that you want to create.
            <br> Please click the button below to pick a file and obtain the thumbnail.</p>
        <input id="picture-thumb-fastThumbnail" type="checkbox" class="win-checkbox">
        <label for="picture-thumb-fastThumbnail">Return fast thumbnail only (could be lower quality)</label>
        <br>
        <select id="picture-thumb-mode" class="option win-dropdown" aria-labelledby="listLabel">
            <option selected="selected" value="picturesGrid" class="win-dropdown">Thumbnail for a grid layout</option>
            <option value="picturesList" class="win-dropdown">Thumbnail for a list layout</option>
            <option value="singlePicture" class="win-dropdown">Thumbnail for a single picture</option>
        </select>
        <br>
        <button class="action win-button" id="picture-thumb-start">Get Thumbnail</button>
        <br>
        <br>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <img class="imageHolder" id="picture-thumb-imageHolder">
        <p id="picture-thumb-detailedStatus" class="status">
            <div id="picture-thumb-modeName"></div>
            <div id="picture-thumb-fileName"></div>
            <div id="picture-thumb-requestedSize"></div>
            <div id="picture-thumb-returnedSize"></div>
        </p>
    </div>
</body>

</html>